import React, { Component, Fragment } from 'react';
import { Card, Button, notification } from 'antd';
import './ui.less';

export default class Notice extends Component {
  handleNote(type, placement) {
    notification[type]({
      message: type,
      description: type,
      placement
    });
  }

  render() {
    return (
      <Fragment>
        <Card title="通知提醒框" className="card-wrap">
          <Button type="primary" onClick={() => this.handleNote('success')}>
            success
          </Button>
          <Button onClick={() => this.handleNote('info')}>info</Button>
          <Button type="dashed" onClick={() => this.handleNote('warning')}>
            warning
          </Button>
          <Button type="danger" onClick={() => this.handleNote('error')}>
            error
          </Button>
          <Button type="Open" onClick={() => this.handleNote('open')}>
            Open
          </Button>
        </Card>

        <Card title="通知提醒框-方向控制" className="card-wrap">
          <Button
            type="primary"
            onClick={() => this.handleNote('success', 'topLeft')}
          >
            topLeft
          </Button>
          <Button onClick={() => this.handleNote('info', 'bottomRight')}>
            bottomRight
          </Button>
          <Button
            type="dashed"
            onClick={() => this.handleNote('warning', 'topRight')}
          >
            topRight
          </Button>
          <Button
            type="danger"
            onClick={() => this.handleNote('error', 'bottomLeft')}
          >
            bottomLeft
          </Button>
        </Card>
      </Fragment>
    );
  }
}
